<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>e-camera</title>
    <script src="event.js"></script>
    <link rel="stylesheet" href="static/css/font-awesome.min.css">
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            width: 100%;
        }
        .outcontent {
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        
        .video {
            position: absolute;
            left: 0;
            top: 0;
            margin: 0;
            padding: 0;
        }
        
        #takePhoto {
            position: absolute;
            left: 90%;
            top: 50%;
            margin: 0;
            padding: 0;
        }

        #willshow {
            position: absolute;
            left: 90%;
            top: 80%;
            margin: 0;
            padding: 0;
            /* border: solid 1px black; */
        }

        #showPhoto {
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
        
        #takePhoto:hover {
            cursor: pointer;
        }
        #willshow:hover {
            cursor: pointer;
        }
    </style>
</head>

<body onload="onload()">
    <!-- <div id = "panel" style="background-color: brown; width: 300px;height:200px"></div> -->
    <canvas width="640" height="360" style="display: none;"></canvas>
    <!--真正的播放摄像头排到的影像-->
    <div class="outcontent">
        <video autoplay width="100%" height="100%"></video>
        <div id="takePhoto" onclick="takePhoto()">
            <i class="fa fa-camera fa-3x"></i>
        </div>
        <img id="willshow" width="64" height="36" onclick="showPhoto()"/>
        <img id="showPhoto" width="100%" height="100%" onclick="showPhoto()"/>
    </div>
</body>

</html>